<template>
  <div class="station">
    <div class="header">
      <div class="bd">
        <div class="close" @click="onClickLeft">
          <img src="../assets/images/guanbi@3x.png" alt />
        </div>
        <div class="info">
          <div class="pic">
            <img :src="initData.avatar" alt />
          </div>
          <div class="text">
            <div class="name">{{initData.username}}</div>
            <div class="infoItem">
              <div class="left">
                <div class="item">{{initData.activity_count}}活动</div>
                <div class="item">{{initData.follow_number}}粉丝</div>
              </div>
              <div class="right">
                <div class="card">
                  <img src="../assets/images/card.png" alt />
                </div>
                <div class="focusOn" @click="focusOn">{{focusText}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="box" v-for="(item,index) in initData.data" :key="index">
        <div class="left">
          <img :src="item.poster" alt />
        </div>
        <div class="right">
          <div class="title">{{item.title}}</div>
          <div class="time">{{item.start_time}}开始</div>
          <div class="price">
            <div class="priceText">¥ {{item.ticket_price}}</div>
            <div class="btn" v-if="item.status==1" @click="signUp(item)">立即报名</div>
            <div class="overBtn" v-if="item.status==5">已过期</div>
            <div class="overBtn" v-if="item.status==3">待审核</div>
            <div class="overBtn" v-if="item.status==2">审核拒绝</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showBind">
      <bindPhone :uid="uid" :activity_id="activity_id"></bindPhone>
    </div>
  </div>
</template>
<script>
export default {
  name: "station",
  data() {
    return {
      initData: {},
      //主办方ID
      owner_id: "",
      pageNum: 1,
      focusText: "关注",
      uid: "",
      activity_id: "",
      showBind: false
    };
  },
  mounted() {
    if (this.$route.query.uid) {
      this.uid = this.$route.query.uid;
    }
    if (this.$route.query.activity_id) {
      this.activity_id = this.$route.query.activity_id;
    }
    //  if (!this.$cookies.get("token")) {
    //   this.$router.push({
    //     path: "/login",
    //     query: {
    //       uid: this.uid,
    //       activity_id: this.activity_id
    //     }
    //   });
    //   return;
    // }
    this.owner_id = this.$route.query.owner_id;
    this.getInitData();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    //获取初始化数据
    async getInitData() {
      let params = {
        token: this.$cookies.get("token"),
        owner_id: this.owner_id,
        type: "",
        page: this.pageNum,
        pageSize: 1000
      };
      const res = await this.$axios.post(this.$api.hostActivityList, params);
      if (res.code == 1) {
        this.initData = res.data;
        if (this.initData.is_follow == 0) {
          this.focusText = "关注";
        } else {
          this.focusText = "已关注";
        }
      } else {
        this.$message({
          message: "获取初始化数据失败：" + res.msg,
          type: "error"
        });
      }
    },
    //立即报名
    signUp(item) {
      if (this.$cookies.get("first_login") != 0) {
        this.showBind = true;
        return;
      }
      this.$router.push({
        path: "/",
        query: {
          activity_id: item.id
        }
      });
    },
    //关注
    async focusOn() {
      if (this.$cookies.get("first_login") != 0) {
        this.showBind = true;
        return;
      }
      let params = {
        token: this.$cookies.get("token"),
        id: this.owner_id
      };
      const res = await this.$axios.post(this.$api.follow, params);
      if (res.code == 1) {
        if (res.data.follow == 0) {
          this.focusText = "关注";
        } else {
          this.focusText = "已关注";
        }
        this.$message({
          message: res.msg,
          type: "success"
        });
      } else {
        this.$message({
          message: "操作失败：" + res.msg,
          type: "error"
        });
      }
    }
  }
};
</script>
<style scoped>
.station {
  min-height: 100vh;
  background: #fff;
}
.header {
  background: url("../assets/images/VCG41164191362.png") no-repeat;
  background-size: 100% auto;
  width: 100%;
  /* height: 1.9rem; */
  overflow: hidden;
}
.header .bd {
  background: rgba(0, 0, 0, 0.4);
}
.header .bd .close {
  padding: 0.2rem 0.2rem 0;
  display: flex;
  justify-content: flex-end;
}
.header .bd .close img {
  width: 0.14rem;
  height: 0.13rem;
}
.header .bd .info {
  padding: 0 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.2rem;
}
.header .bd .info .pic img {
  width: 0.45rem;
  height: 0.45rem;
}
.header .bd .info .text {
  padding-left: 0.14rem;
  display: flex;
  flex: auto;
  flex-direction: column;
  justify-content: center;
}
.header .bd .info .text .name {
  font-size: 16rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
.header .bd .info .text .infoItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .bd .info .text .infoItem .left {
  display: flex;
  align-items: center;
}
.header .bd .info .text .infoItem .left .item {
  color: #fff;
  font-size: 0.13rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(212, 212, 212, 1);
  margin-right: 0.2rem;
}
.header .bd .info .text .infoItem .right {
  display: flex;
  align-items: center;
}
.header .bd .info .text .infoItem .right img {
  width: 0.2rem;
}
.header .bd .info .text .infoItem .right .focusOn {
  margin-left: 0.16rem;
  font-size: 0.12rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  border: 1px solid #fff;
  border-radius: 50px;
  width: 0.5rem;
  height: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  padding-left: 0.2rem;
}
.container .box {
  padding: 0.14rem 0.15rem 0.14rem 0;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  /* align-items: center; */
}
.container .box .left img {
  width: 1.58rem;
  height: 0.98rem;
}
.container .box .right {
  padding-left: 0.15rem;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  flex:auto;
}
.container .box .right .title {
  font-size: 0.15rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.container .box .right .time {
  font-size: 0.13rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(139, 139, 139, 1);
}
.container .box .right .price {
  display: flex;
  justify-content: space-between;
  
}
.container .box .right .price .priceText {
  font-size: 0.13rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(139, 139, 139, 1);
}
.container .box .right .price .btn {
  font-size: 0.12rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: #00c2df;
  width: 0.63rem;
  height: 0.25rem;
  border: 1px solid rgba(0, 143, 233, 1);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .box .right .price .overBtn {
  width: 0.63rem;
  height: 0.25rem;
  border: 1px solid rgba(132, 132, 132, 1);
  border-radius: 5px;
  font-size: 0.12rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(151, 151, 151, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>


